
/*
 * Dependency:
 *     bt.gmap
 */

bt.module({builder: function(bt){

    var j$ = jQuery;

    var _createPointImage = function(type) {
        return new google.maps.MarkerImage(STATIC_URL+'img/new_icon_' + type + '.png',
                                           new google.maps.Size(35, 37),
                                           new google.maps.Point(0, 0),
                                           new google.maps.Point(15, 34));
    };

    var _addWaypoint = function(index, data) {
        var type = data[0];
        var cls = data[1];
        var image;
        if (type) image = _createPointImage(type);
        var contentString = '';
        var prefix = '<div id="info-window-' + index + '"'; // NOTE: NO ">" here.
                                                            // Should add it below
        var postfix = '<div class="white-bg"><a class="right-here" href="#">就在这里</a></div></div>';
        if(cls == "start") {
            prefix += 'class="start-popup" >';
            contentString = prefix + '<p class="start">游记起点</p>' + postfix;
        } else if(cls == "photo") {
            prefix += 'class="photo-popup" >';
            contentString = prefix + '<a href="#wp' + data[5]
                + '"><img class="map-popup-img" src="' + data[4]
                + '" /></a>' + postfix;
        } else if (cls == "text") {
            prefix += 'class="text-popup" >';
            contentString = prefix + '<a class="text" href="#wp' + data[5]
                + '">"' + data[4] + '"</a>' + postfix;
        } else if(cls == "stop") {
            prefix += 'class="start-popup" >';
            contentString = prefix + '<p class="start">游记终点</p>' + postfix;
        }

        var marker = bt.gmap.createMarker({
            position: bt.gmap.createLatLng(data[2], data[3]),
            icon: image
        });

        var infoWindow = new google.maps.InfoWindow({
            content: contentString,
            disableAutoPan: false,
            maxWidth: 208
        });

        return {marker: marker, infoWindow: infoWindow};
    };

    var renderPath = function(obj, opts, withPopup) {
        var _opts = {
            strokeColor: "#0695f8",
            strokeOpacity: 1.0,
            strokeWeight: 4
        };
        var rtn = {};
        var obj = j$(obj);
        var pathData = parsePath(obj);
        var coordinates = [];
        var bounds = bt.gmap.createLatLngBounds();
        var markers = {};
        var infoWindows = {};

        for(k in opts) {
            _opts[k] = opts[k];
        }

        // excluded the first and the last mask marker to display 'trip start/stop'
        for(var i = 1; i < pathData.length - 1; i ++) {
            //data = [type, cls, lat, lon, content, wp_id, date_added]
            var data = pathData[i];
            var latLng = bt.gmap.createLatLng(data[2], data[3]);
            if(withPopup && data[0] != "track") {
                var _ = _addWaypoint(i, data);
                markers[i] = _.marker;
                infoWindows[i] = _.infoWindow;
            }
            coordinates.push(latLng);
            bounds.extend(latLng);
        }
        _opts["path"] = coordinates;
        var path = bt.gmap.createPolyline(_opts);
        rtn["path"] = path;
        rtn["bounds"] = bounds;
        rtn["markers"] = markers;
        rtn["infoWindows"] = infoWindows;
        return rtn;
    };

    var parsePath = function(obj) {
        // obj should be a jQuery object
        //  which generate by {{ ...|render_waypoints }}
        var pathData = [];

        obj.children().each(function(i, point) {
            point = j$(point);
            var type = point.attr('data-type');
            var cls = point.attr('class');
            var items = point.children();
            var lat = parseFloat(j$(items[0]).text());
            var lon = parseFloat(j$(items[1]).text());
            var content = j$(items[2]).text();
            var wp_id = null;
            var date_added = null;
            if (items.length > 3) {
                wp_id = j$(items[3]).text();
            }
            if (items.length > 4) {
                date_added = parseFloat(j$(items[4]).text());
            }
            pathData.push([type, cls, lat, lon, content, wp_id, date_added]);
        });

        return pathData;
    };

    //bt.tripUtils.parsePath = parsePath;
    bt.tripUtils.renderPath = renderPath;
}});
